<template>
  <div class="petclassification">
    <div class="addclassification">
      <button class="classification" @click="addopen">添加分类</button>
    </div>
    <!-- 宠物分类 -->
    <div class="classificationlist">
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
      >
        <el-table-column label="分类名称" prop="petclassname">
        </el-table-column>
        <el-table-column label="品种" prop="varieties"> </el-table-column>
        <el-table-column align="right">
          <template slot="header"> 操作 </template>
          <template >
            <el-button size="mini" @click="addvarieties">添加品种</el-button>
            <el-button size="mini" @click="deletevarieties" type="info"
              >删除品种</el-button
            >
            <el-button size="mini" type="danger" @click="open">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "PetClassification",
  data() {
    return {
      tableData: [],
      search: "",
    };
  },
  beforeMount() {
    // 获取数据
    this.axios.get("/petclassification").then((res) => {
      console.log(res.data.petclass);
      this.tableData = res.data.petclass;
    });
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 添加分类
    addopen() {
      const inpattern = new RegExp("^宠物[鱼|蛇|狗|猫|鸟|龟|鼠|蜥蜴]$");
      this.$prompt("请输入宠物分类", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: inpattern,
        inputErrorMessage: "输入宠物分类不正确",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你的宠物分类是: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 添加种类
    addvarieties() {
      this.$prompt("请输入宠物品种", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /鱼|蛇|狗|猫|鸟|龟|鼠|蜥蜴/,
        inputErrorMessage: "输入宠物品种不正确",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你的宠物品种是: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    open() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除品种
    deletevarieties() {
        this.$prompt('请输入您想要删除的品种', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的删除的品种是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
  },
};
</script>

<style lang="scss">
.petclassification {
  padding: 20px;
  background-color: white;
  .addclassification {
    display: flex;
    justify-content: flex-end;
    .classification {
      color: #333333;
      margin: 16px;
      padding: 3px;
      font-size: 14px;
      border: none;
      border-radius: 5px;
      border: 1px solid #d3d5d7;
      cursor: pointer;
      background-color: white;
    }
  }
}
</style> 